<template>
    <div class="body">
        <headers class="" />

        <div class="relative swiper_banner">
            <swiper :options="swiperOption" class="swiper-wrap swiper-no-swiping" ref="swiperLarge" v-if="bannerLarge.length > 0">
                <swiper-slide v-for="item of bannerLarge" :key="item.id" >
                    <img class="img" :src="img_url_appSource + item.imgAddress" />
                </swiper-slide>
                <div class="swiper-pagination"  v-for="(item,index) of bannerLarge" :key="index" slot="pagination" ></div>
            </swiper>
            <div v-if="bannerLarge.length > 1">
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div class="banner_thumbs" v-if="bannerLarge.length > 0">
                <div :class="['list', { 'current': currentSwiper === index }]" v-for="(item, index) of bannerLarge" :key="item.id" @click="changeBanner(index)">
                    <img class="img banner_img" :src="img_url_appSource + item.imgAddress" />
                </div>
            </div>
        </div>
        <!-- <div class="banner">
            <div class="content">
                <p class="tit">{{ $t('main.banner[0]') }}</p>
                <p class="date">{{ $t('main.banner[1]') }}-6月8日</p>
                <p>{{ $t('main.banner[2]', { value: '20', unit: '0.00160500' }) }}</p>
                <div class="btn">{{ $t('main.banner[3]') }}</div>
            </div>
            <div class="icon">
                <img class="img" src="@assets/imgs/main/banner_icon.png" />
            </div>
            <img class="img" :src="img_url_appSource + 'banner_bg.jpg'" />
        </div> -->
        <div class="mining_types">
            <div class="title">
                <h2 class="title_main">{{ $t('main.title[0]') }}</h2>
                <p class="title_sub">{{ $t('main.title_sub[0]') }}</p>
            </div>
            <div class="content">
                <div class="list pointer" v-for="item of currencysList" :key="item.id" @click="jumpHashRate(item)">
                    <img class="img" :src="img_url_appSource + item.logo" />
                    <p class="text">
                        {{ item.currency }}
                    </p>
                    <p :class="['desc', parseFloat(item.upordown) < 0 ? 'down' : 'up']">
                        {{ '≈ $  ' + (item.baseId ? Number(currencysPrice[item.baseId] || 0).toFixed(2) : 0) }}
                        <!-- {{item.baseId ? currencysPrice[item.baseId] : 0}} -->
                        <i class="iconfont">&#xe610;</i>
                    </p>
                </div>
            </div>
        </div>
        <div class="process_info">
            <div class="title">
                <h2 class="title_main">{{ $t('main.title[1]') }}</h2>
                <p class="title_sub">{{ $t('main.title_sub[1]') }}</p>
            </div>
            <div class="content">
                <div class="first">
                    <img class="img" :src="img_url_web + 'process_1.png'" />
                    <!-- <div class="list" style="margin: 0 44px;">
                        <p class="text">笑脸矿业云算力平台</p>
                    </div>
                    <div class="list" style="margin-left: 178px;">
                        <p class="text">注册购买云算力</p>
                    </div>
                    <div class="list" style="margin-left: 278px;">
                        <p class="text">开始挖矿</p>
                    </div>
                    <div class="list" style="margin-left: 280px;">
                        <p class="text">坐享收益</p>
                    </div> -->
                </div>
                <div class="second">
                    <img class="arrow_up" :src="img_url_web + 'process_2.png'" />
                    <!-- <div class="box">
                        <div class="list">
                            <img class="img" :src="require('@assets/imgs/common/imgs.jpg')" />
                            <p class="text">笑脸矿业云算力平台</p>
                        </div>
                        <div class="arrow">
                            <i class="iconfont">&#xe600;</i>
                        </div>
                        <div class="list">
                            <img class="img" :src="require('@assets/imgs/common/imgs.jpg')" />
                            <p class="text">注册购买云算力</p>
                        </div>
                        <div class="arrow">
                            <i class="iconfont">&#xe600;</i>
                        </div>
                        <div class="list">
                            <img class="img" :src="require('@assets/imgs/common/imgs.jpg')" />
                            <p class="text">开始挖矿</p>
                        </div>
                        <div class="arrow">
                            <i class="iconfont">&#xe600;</i>
                        </div>
                        <div class="list">
                            <img class="img" :src="require('@assets/imgs/common/imgs.jpg')" />
                            <p class="text">坐享收益</p>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="main_points">
            <div class="title black_bg">
                <h2 class="title_main">{{ $t('main.title[2]') }}</h2>
                <p class="title_sub">{{ $t('main.title_sub[2]', { number: '500,000', value: '0.00160500', percent: '60' }) }}</p>
            </div>
            <div class="content">
                <div class="list">
                    <img class="img" :src="require('@assets/imgs/main/tese_1.png')" />
                    <p class="text">{{ $t('main.points[0].text') }}</p>
                    <p class="desc">{{ $t('main.points[0].desc') }}</p>
                </div>
                <div class="list">
                    <img class="img" :src="require('@assets/imgs/main/tese_2.png')" />
                    <p class="text">{{ $t('main.points[1].text') }}</p>
                    <p class="desc">{{ $t('main.points[1].desc') }}</p>
                </div>
                <div class="list">
                    <img class="img" :src="require('@assets/imgs/main/tese_3.png')" />
                    <p class="text">{{ $t('main.points[2].text') }}</p>
                    <p class="desc">{{ $t('main.points[2].desc') }}</p>
                </div>
                <div class="list">
                    <img class="img" :src="require('@assets/imgs/main/tese_4.png')" />
                    <p class="text">{{ $t('main.points[3].text') }}</p>
                    <p class="desc">{{ $t('main.points[3].desc') }}</p>
                </div>
            </div>
            <div class="btn pointer" @click="jumpHashRate({})">{{ $t('main.buy_hash_rate') }}</div>
        </div>
        <div class="reports">
            <div class="title">
                <h2 class="title_main">{{ $t('main.title[3]') }}</h2>
                <p class="title_sub">{{ $t('main.title_sub[3]') }}</p>
            </div>
            <div class="content">
                <div class="list" v-for="item of newsList" :key="item.id">
                    <img class="img" :src="img_url_web + 'report_' + item.id + '.jpg'" />
                    <div class="text_box">
                        <p class="tit">{{ item.title }}</p>
                        <p class="text">{{ item.text }}</p>
                        <a class="link" :href="item.url">{{ $t('main.learn_more') + ' >' }}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="friends">
            <div class="title">
                <h2 class="title_main">{{ $t('main.title[4]') }}</h2>
                <p class="title_sub">{{ $t('main.title_sub[4]') }}</p>
            </div>
            <div class="content">
                <a class="list" href="https://www.49you.com/">
                    <img class="img" :src="img_url_web + 'friends_1.png'" />
                </a>
                <a class="list" href="https://www.antpool.com/">
                    <img class="img" :src="img_url_web + 'friends_2.png'" />
                </a>
                <a class="list" href="https://www.avalonminer.shop/">
                    <img class="img" :src="img_url_web + 'friends_3.png'" />
                </a>
                <a class="list" href="https://www.hoo.com/">
                    <img class="img" :src="img_url_web + 'friends_4.png'" />
                </a>
                <a class="list" href="https://www.bitmain.com/">
                    <img class="img" :src="img_url_web + 'friends_5.png'" />
                </a>
                <a class="list" href="https://www.jzlinglong.com/">
                    <img class="img" :src="img_url_web + 'friends_6.png'" />
                </a>
                <a class="list" href="https://www.poolin.com/">
                    <img class="img" :src="img_url_web + 'friends_7.png'" />
                </a>
                <a class="list" href="http://www.iterduo.com/">
                    <img class="img" :src="img_url_web + 'friends_8.png'" />
                </a>
                <a class="list" href="https://www.innosilicon.com/">
                    <img class="img" :src="img_url_web + 'friends_9.png'" />
                </a>
                <a class="list" href="https://www.f2pool.com/">
                    <img class="img" :src="img_url_web + 'friends_10.png'" />
                </a>
            </div>
        </div>

        <footers></footers>
    </div>
</template>

<script>
    import Headers from '../components/header/header.vue';
    import Footers from '../components/footer/footer.vue';
    import { getCurrencys } from '@doapis/currency/currency.js';
    import { getMainBanners } from '@doapis/others/others.js';

    let currencyWS;
    export default {
        name: "Main",
        components: {
            Headers,
            Footers
        },
        data: function() {
            const that = this;
            return {
                bannerLarge: [],
                currencysList: [],
                currencysPrice: {"bitcoin":"0","ethereum":"0","decred":"0","dash":"0","ethereum-classic":"0","ravencoin":"0","grin":"0","beam":"0","haha":"0.12"},
                newsList: [{
                    id: 1,
                    title: '专访',
                    text: '专访GRINOK | 2020矿业生态，区块链爱好者如何低门槛参与算力挖矿',
                    url: 'http://www.iterduo.com/posts/111239'
                },{
                    id: 2,
                    title: '新闻',
                    text: '深度 | 聊聊2020年云算力挖矿市场趋势分析，古灵夜谭专访',
                    url: 'https://www.toutiao.com/i6801866647029154318/'
                },{
                    id: 3,
                    title: '热点',
                    text: '2020年，区块链挖矿为什么一定要挖主流矿币',
                    url: 'https://www.toutiao.com/i6796925395686916622/'
                }],
                swiperOption: {
                    notNextTick: true,
                    loop: false,
                    autoplay: {
                        delay: 3400,
                        stopOnLastSlide: false,
                        disableOnInteraction: false
                    },
                    speed: 800,                     // 滑动速度
                    direction: "horizontal",        // 滑动方向
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    on: {
                        slideChangeTransitionEnd: function() {
                            that.currentSwiper = that.$refs.swiperLarge.swiper.activeIndex;
                        }
                    }
                },
                currentSwiper: 0        // 用来同步banner下面的缩略图，两个一起变换
            }
        },
        methods: {
            // 获取banner
            getBanners: function() {
                const that = this;
                getMainBanners({
                    current: 1,
                    attribute: 'pc_bannber'
                }).then(function(res) {
                    let data = res.data.records;
                    that.bannerLarge = data;
                });
            },
            // 点击缩略图切换banner
            changeBanner: function(index) {
                const swiperLarge = this.$refs.swiperLarge;
                swiperLarge.swiper.slideTo(index, 800, false);
                swiperLarge.swiper.autoplay.start();
                this.currentSwiper = index;
            },
            // 获取平台所有币种
            getCurrencys: function() {
                const that = this;
                getCurrencys().then(function(res) {
                    let data = res.records;
                    that.currencysList = data;
                    that.getCurrencyPrice(data);
                });
            },
            // 实时更新平台币种涨幅
            getCurrencyPrice: function(data) {
                const that = this;
                let query = '';
                let i = 0;

                // 拼接币种字符串转为URL参数
                do {
                    if (data[i].baseId) query += data[i].baseId + ',';
                    i++;
                } while (i < data.length);
                query = query.substring(0, query.length - 1);

                currencyWS = $.WebSocket({
                    url: 'wss://ws.coincap.io/prices?assets=' + query,
                    message: function(ev) {
                        that.currencysPrice = $.extend(that.currencysPrice, JSON.parse(ev.data));
                    }
                });
            },
            jumpHashRate: function(params) {
                this.$router.push({ path: '/hash_rate', query: { currency: params.currency }});
            }
        },
        mounted: function() {
            this.getBanners();
            this.getCurrencys();
        },
        destroyed: function () {
            currencyWS.close();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .main_box {
        padding: 60px 0;
        text-align: center;
    }
    .body{
        width: 100%;
        background-color: white;
        .title{
            margin-bottom: 40px;
            &.black_bg{
                .title_main, .title_sub{
                    color: white;
                }
            }
        }
        .title_main{
            font-size: 26px;
            font-weight: 700;
            color: #333333;
        }
        .title_sub{
            margin-top: 10px;
            color: #3F465C;
        }
    }
    .banner{
        display: flex;
        // margin-top: -80px;
        // background: url('~@assets/imgs/main/banner_bg.jpg') no-repeat;
        // background-size: 100% auto;
        .content{
            padding: 5% 0;
            margin: 80px 0 0 10%;
            color: white;
            white-space: nowrap;
            letter-spacing: 3px;
            .tit{
                font-size: 40px;
                margin-bottom: 20px;
            }
            .date{
                margin-bottom: 22px;
                font-size: 28px;
            }
            .btn{
                width: 140px;
                line-height: 38px;
                margin-top: 50px;
                text-align: center;
                border-radius: 34px;
                background:linear-gradient(to bottom, #7BF4FE, #50A8FA);
            }
        }
    }
    .swiper_banner{
        .swiper-button-prev, .swiper-button-next{
            padding: 18px;
            background-color: rgba(255, 255, 255, 0.4);
        }
    }
    .banner_thumbs {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 4;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        padding: 0;
        .list{
            max-width: 20%;
            box-sizing: border-box;
            border-top: 4px solid transparent;
            &.current{
                border-color: @theme_color;
            }
        }
    }
    .mining_types{
        .main_box;
        .content{
            .flex_row_wrap;
            margin: 0 10%;
            background-color: @theme_bg;
            box-shadow: 0px 10px 18px #ECEFFF;
            .list{
                width: 25%;
                padding: 30px 0;
                position: relative;
                box-sizing: border-box;
                border-left: 2px solid #E1E1E1;
                border-image: linear-gradient(-180deg, white 20%,#E1E1E1 50%, rgba(255, 255, 255, .00) 80%) 2 2 2 2;
                transition: 0.7s background-color;
                &:after{
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    height: 2px;
                    background-color: #f5f7fb;
                }
                &:nth-child(-n+4):after{
                     content: none;
                }
                &:nth-child(1),&:nth-child(4n-3){
                    border-left: none;
                }
                &:hover{
                    background-color: #32374a;
                    .text{
                        color: white;
                    }
                }
            }
            .img{
                width: auto;
                height: 30px;
            }
            .text{
                margin: 10px 0;
                line-height: 26px;
                font-size: 22px;
                font-weight: 700;
            }
            .desc{
                font-size: 10px;
                line-height: 10px;
                color: #67686e;
                .iconfont{
                    color: #29CC00;
                }
                &.up{
                    color: #29CC00;
                }
                &.down{
                    color: #ff3c00;
                    .iconfont{
                        display: inline-block;
                        color: #ff3c00;
                        transform: rotateX(-180deg);
                    }
                }
            }
        }
    }
    .process_info{
        .main_box;
        background-color: @theme_bg;
        .first{
            .flex_row_wrap;
            margin: 0 10%;
            /* .list{
                text-align: center;
                .text{
                    margin-top: 20px;
                    font-size: 13px;
                }
            } */
        }
        .second{
            margin: 0 10%;
            text-align: left;
            .arrow_up{
                display: table;
                width: 900px;
                margin: 20px 0 0 14px;
            }
            /* .box{
                .flex_row_wrap;
                padding: 30px 40px;
                margin-top: 20px;
                text-align: center;
                border: 2px dotted #c7c7c7;
                .img{
                    width: 120px;
                }
            } */
        }
        .img{
            width: 100%;
            margin-top: 40px;
        }
    }
    .main_points{
        .main_box;
        color: white;
        background: #2a2d3a url('~@assets/imgs/main/tese_bg.jpg') no-repeat left bottom / 100% auto;
        .img{
            width: auto;
            height: 100px;
        }
        .text{
            margin-top: 30px;
            font-size: 18px;
        }
        .desc{
            width: 70%;
            margin: 0 auto;
            margin-top: 20px;
        }
        .content{
            .flex_row_wrap;
            padding: 20px 10%;
            .list{
                width: 25%;
            }
        }
        .btn{
            width: 220px;
            line-height: 54px;
            margin: 20px auto;
            font-size: 16px;
            border-radius: 4px;
            color: white;
            background-color: @theme_color;
        }
    }
    .reports{
        .main_box;
        .content{
            .flex_row_wrap;
            margin: 0 14%;
            text-align: left;
        }
        .list{
            width: calc(33.33% - 48px);
            margin: 0 20px;
            position: relative;
            box-sizing: border-box;
            border: 1px solid #DDDDDD;
            background-color: @theme_bg;
            color: #555555;
            .text_box{
                padding: 24px;
            }
            .tit{
                margin-top: 20px;
                font-size: 18px;
                font-weight: 700;
                color: #333333;
            }
            .text{
                margin: 20px 0 60px 0;
                font-size: 13px;
                line-height: 18px;
                color: #999999;
            }
            .link{
                position: absolute;
                bottom: 20px;
                right: 20px;
                font-weight: 700;
                color: #5C82FF;
            }
        }
    }
    .friends{
        .main_box;
        .content{
            .flex_row_wrap;
            margin: 0 20%;
            .list{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 20%;
                background-color: @theme_bg;
                .img{
                    width: 60%;
                    padding: 20px 0;
                }
            }
        }
    }
    @media screen and (max-width: @small_view) {
        .banner{
            .content{
                margin-left: 7%;
            }
        }
    }
</style>
